<template>
  <div class="container container--grid">
    <div class="container__center--md my-16" v-if="!showConfirmation">
      <h1 class="h1 shopping__cart-title">{{ cartTitle }}</h1>
      <ul class="accordion">
        <li class="accordion__item">
          <button
            class="accordion__button"
            :class="{ active: activeAccordionIndex === 1 }"
            @click="handleAccordionClick(1)"
            :id="getUniqueId('shopping-cart-drawer-overview-button')"
          >
            <StepIndicator
              :step="1"
              :isConfirmed="step1Confirmed"
              :isActive="activeStepIndex === 1"
            />
            <h2 class="accordion__title">{{ cartOverviewTitle }}</h2>
            <SvgIcon icon="ChevronDown" size="xl" class="accordion__arrow" />
          </button>
          <div
            class="accordion__drawer"
            :id="getUniqueId('shopping-cart-drawer-overview')"
            :class="{ active: activeAccordionIndex === 1 }"
          >
            <div class="shopping__cart-accordion-content">
              <template v-if="card1Shown || card2Shown || card3Shown">
                <div>
                  <ul class="shopping__cart-card-list">
                    <li v-if="card1Shown">
                      <ShoppingCard
                        type="edit"
                        :image="{
                          src: 'images/publication-cover.png',
                          alt: 'publication-cover',
                        }"
                        context="mobile"
                        title="Pensionskassenstatistik - Kennzahlen 2018-2022 (554-2200)"
                        itemPrice="Preis pro Stück: CHF 12.00"
                        price="CHF 12.00"
                        removeLabel="Entfernen"
                        editLabel="Editieren"
                        :deleteTriggered="
                          () => {
                            card1Shown = false

                            if (!card2Shown && !card3Shown) {
                              step1Confirmed = false
                              step2Confirmed = false
                            }
                          }
                        "
                      />
                    </li>
                    <li v-if="card2Shown">
                      <ShoppingCard
                        type="edit"
                        title="Pensionskassenstatistik - Kennzahlen 2018-2022 (554-2200)"
                        itemPrice="Preis pro Stück: CHF 12.00"
                        price="CHF 12.00"
                        removeLabel="Entfernen"
                        editLabel="Editieren"
                        :deleteTriggered="
                          () => {
                            card2Shown = false

                            if (!card1Shown && !card3Shown) {
                              step1Confirmed = false
                              step2Confirmed = false
                            }
                          }
                        "
                      />
                    </li>
                    <li v-if="card3Shown">
                      <ShoppingCard
                        type="edit"
                        :image="{
                          src: 'images/publication-cover.png',
                          alt: 'publication-cover',
                        }"
                        title="Pensionskassenstatistik - Kennzahlen 2018-2022 (554-2200)"
                        itemPrice="Preis pro Stück: CHF 12.00"
                        price="CHF 12.00"
                        removeLabel="Entfernen"
                        editLabel="Editieren"
                        :deleteTriggered="
                          () => {
                            card3Shown = false

                            if (!card1Shown && !card2Shown) {
                              step1Confirmed = false
                              step2Confirmed = false
                            }
                          }
                        "
                      />
                    </li>
                  </ul>
                </div>
                <ShoppingCartTotal
                  title="Provisorischer Bestellwert exkl. MwSt:"
                  total="CHF 36.00"
                  description="Ermässigungen werden gemäss Gebührenverordnung für statistische Dienstleistungen (Art. 19 und 22) gewährt. Ansprüche können im nächsten Schritt unter „Nachricht“ angebracht werden."
                  nextStepLabel="Nächster Schritt"
                  nextStepAriaLabel="Nächster Schritt"
                  @nextStep="overviewNextStepClicked"
                />
              </template>
              <template v-else
                ><p class="shopping__cart-empty-text">
                  Es befinden sich keine Produkte im Warenkorb
                </p></template
              >
            </div>
          </div>
        </li>

        <li class="accordion__item">
          <button
            class="accordion__button"
            :class="{ active: activeAccordionIndex === 2 }"
            @click="handleAccordionClick(2)"
            :id="getUniqueId('shopping-cart-drawer-address-button')"
          >
            <StepIndicator
              :step="2"
              :isConfirmed="step2Confirmed"
              :isActive="activeStepIndex === 2"
            />
            <h2 class="accordion__title">{{ cartAddressTitle }}</h2>
            <SvgIcon icon="ChevronDown" size="xl" class="accordion__arrow" />
          </button>
          <div
            class="accordion__drawer"
            :id="getUniqueId('shopping-cart-drawer-address')"
            :class="{ active: activeAccordionIndex === 2 }"
          >
            <div class="shopping__cart-accordion-content">
              <Notification
                class="shopping__cart-order-form-notification"
                type="hint"
                :closeBtn="false"
                text="Bitte füllen Sie alle Pflichtfelder aus. Diese sind mit mit einem “*” markiert."
              />
              <Form class="shopping__cart-order-form">
                <h3 class="shopping__cart-order-form-invoice-title">
                  Rechnungsaddresse
                </h3>
                <Fieldset
                  variant="outline"
                  size="base"
                  :required="formInputFields.invoice.gender.mandatory"
                  legend="Anrede"
                  messageType="error"
                  :message="
                    formInputFields.invoice.gender.touched &&
                    !formInputFields.invoice.gender.valid
                      ? 'Bitte wählen Sie eine Anrede aus.'
                      : ''
                  "
                >
                  <Radio
                    :required="true"
                    size="base"
                    type="outline"
                    name="radio-gender"
                    value="Frau"
                    label="Frau"
                    :onChange="onChange"
                  />
                  <Radio
                    :required="true"
                    size="base"
                    type="outline"
                    name="radio-gender"
                    value="Herr"
                    label="Herr"
                    :onChange="onChange"
                  />
                </Fieldset>

                <div class="shopping__cart-order-form-container">
                  <div class="shopping__cart-order-form-input-group">
                    <Input
                      :required="formInputFields.invoice.lastName.mandatory"
                      label="Name"
                      placeholder="Name"
                      messageType="error"
                      :onInput="
                        (e) =>
                          setFormFieldValue(
                            'invoice',
                            'lastName',
                            e.target.value
                          )
                      "
                      :message="
                        formInputFields.invoice.lastName.touched &&
                        !formInputFields.invoice.lastName.valid
                          ? 'Bitte geben Sie einen Namen an.'
                          : ''
                      "
                    />
                    <Input
                      :required="formInputFields.invoice.firstName.mandatory"
                      label="Vorname"
                      placeholder="Vorname"
                      messageType="error"
                      :onInput="
                        (e) =>
                          setFormFieldValue(
                            'invoice',
                            'firstName',
                            e.target.value
                          )
                      "
                      :message="
                        formInputFields.invoice.firstName.touched &&
                        !formInputFields.invoice.firstName.valid
                          ? 'Bitte geben Sie einen Vornamen an.'
                          : ''
                      "
                    />
                  </div>

                  <div class="shopping__cart-order-form-input-group">
                    <Input
                      class="shopping__cart-order-form-input-spacing"
                      :required="formInputFields.invoice.org.mandatory"
                      label="Organisation"
                      placeholder="Organisation"
                      messageType="error"
                      :onInput="
                        (e) =>
                          setFormFieldValue('invoice', 'org', e.target.value)
                      "
                      :message="
                        formInputFields.invoice.org.touched &&
                        !formInputFields.invoice.org.valid
                          ? 'Die Eingabe ist ungültig. Bitte überprüfen Sie Ihre Eingabe.'
                          : ''
                      "
                    />
                    <Input
                      class="shopping__cart-order-form-input-spacing"
                      :required="formInputFields.invoice.street.mandatory"
                      label="Strasse / Nr."
                      placeholder="Strasse & Hausnummer"
                      messageType="error"
                      :onInput="
                        (e) =>
                          setFormFieldValue('invoice', 'street', e.target.value)
                      "
                      :message="
                        formInputFields.invoice.street.touched &&
                        !formInputFields.invoice.street.valid
                          ? 'Bitte geben Sie eine Strasse und Hausnummer an.'
                          : ''
                      "
                    />
                  </div>
                  <div class="shopping__cart-order-form-input-group">
                    <Input
                      class="shopping__cart-order-form-input-spacing"
                      :required="formInputFields.invoice.postOffice.mandatory"
                      label="Postfach"
                      placeholder="Postfach"
                      messageType="error"
                      :onInput="
                        (e) =>
                          setFormFieldValue(
                            'invoice',
                            'postOffice',
                            e.target.value
                          )
                      "
                      :message="
                        formInputFields.invoice.postOffice.touched &&
                        !formInputFields.invoice.postOffice.valid
                          ? 'Die Eingabe ist ungültig. Bitte überprüfen Sie Ihre Eingabe.'
                          : ''
                      "
                    />
                    <Input
                      class="shopping__cart-order-form-input-spacing"
                      :required="formInputFields.invoice.zip.mandatory"
                      label="Postleitzahl"
                      placeholder="Postleitzahl"
                      messageType="error"
                      :onInput="
                        (e) =>
                          setFormFieldValue('invoice', 'zip', e.target.value)
                      "
                      :message="
                        formInputFields.invoice.zip.touched &&
                        !formInputFields.invoice.zip.valid
                          ? 'Bitte geben Sie eine Postleitzahl an.'
                          : ''
                      "
                    />
                  </div>
                  <div class="shopping__cart-order-form-input-group">
                    <Input
                      class="shopping__cart-order-form-input-spacing"
                      :required="formInputFields.invoice.city.mandatory"
                      label="Ort"
                      placeholder="Ort"
                      messageType="error"
                      :onInput="
                        (e) =>
                          setFormFieldValue('invoice', 'city', e.target.value)
                      "
                      :message="
                        formInputFields.invoice.city.touched &&
                        !formInputFields.invoice.city.valid
                          ? 'Bitte geben Sie eine Ortschaft an.'
                          : ''
                      "
                    />
                    <!-- Works also with input -->
                    <Select
                      class="shopping__cart-order-form-input-spacing"
                      :required="formInputFields.invoice.country.mandatory"
                      variant="outline"
                      size="base"
                      label="Land"
                      messageType="error"
                      :message="
                        formInputFields.invoice.country.touched &&
                        !formInputFields.invoice.country.valid
                          ? 'Bitte geben Sie ein Land an.'
                          : ''
                      "
                      :onSelect="
                        (e) =>
                          setFormFieldValue(
                            'invoice',
                            'country',
                            e.target.value
                          )
                      "
                    >
                      <option selected disabled>Land auswählen</option>
                      <option value="CH">Schweiz</option>
                      <option value="DE">Deutschland</option>
                      <option value="AT">Österreich</option>
                      <option value="FR">Frankreich</option>
                      <option value="IT">Italien</option>
                    </Select>
                  </div>
                  <div class="shopping__cart-order-form-input-group">
                    <Input
                      class="shopping__cart-order-form-input-spacing"
                      :required="formInputFields.invoice.phone.mandatory"
                      label="Telefon"
                      placeholder="+41 (0)58 555 55 44"
                      messageType="error"
                      :onInput="
                        (e) =>
                          setFormFieldValue('invoice', 'phone', e.target.value)
                      "
                      :message="
                        formInputFields.invoice.phone.touched &&
                        !formInputFields.invoice.phone.valid
                          ? 'Bitte geben Sie eine gültige Telefonnummer an.'
                          : ''
                      "
                    />
                    <Input
                      class="shopping__cart-order-form-input-spacing"
                      :required="formInputFields.invoice.email.mandatory"
                      label="E-Mail"
                      placeholder="E-Mail Addresse"
                      messageType="error"
                      :onInput="
                        (e) =>
                          setFormFieldValue('invoice', 'email', e.target.value)
                      "
                      :message="
                        formInputFields.invoice.email.touched &&
                        !formInputFields.invoice.email.valid
                          ? 'Bitte geben Sie eine gültige E-Mail Adresse an.'
                          : ''
                      "
                    />
                  </div>
                </div>
                <Textarea
                  class="shopping__cart-order-form-input-spacing"
                  label="Nachricht (Bitte Ermässigungsansprüche hier anbringen)"
                  name="order-message"
                  placeholder="Erweiterte Details hier angeben"
                />
                <div class="shopping__cart-order-form-fieldset-spacing">
                  <Fieldset variant="outline" size="base" :required="false">
                    <Checkbox
                      :required="false"
                      size="base"
                      type="outline"
                      name="radio-delivery-address"
                      value="matching delivery address"
                      label="Lieferadresse ist mit Rechnungsadresse identisch."
                      :checked="!showDeliveryAddress"
                      :onChange="
                        (e) => {
                          e.target.checked
                            ? (showDeliveryAddress = false)
                            : (showDeliveryAddress = true)
                        }
                      "
                    />
                  </Fieldset>
                </div>

                <div v-if="showDeliveryAddress">
                  <h3 class="shopping__cart-order-form-delivery-address-title">
                    Lieferadresse
                  </h3>
                  <div class="shopping__cart-order-form-container">
                    <div class="shopping__cart-order-form-input-group">
                      <Input
                        :required="formInputFields.delivery.lastName.mandatory"
                        label="Name"
                        placeholder="Name"
                        messageType="error"
                        :onInput="
                          (e) =>
                            setFormFieldValue(
                              'delivery',
                              'lastName',
                              e.target.value
                            )
                        "
                        :message="
                          formInputFields.delivery.lastName.touched &&
                          !formInputFields.delivery.lastName.valid
                            ? 'Bitte geben Sie einen Namen an.'
                            : ''
                        "
                      />
                      <Input
                        :required="formInputFields.delivery.firstName.mandatory"
                        label="Vorname"
                        placeholder="Vorname"
                        messageType="error"
                        :onInput="
                          (e) =>
                            setFormFieldValue(
                              'delivery',
                              'firstName',
                              e.target.value
                            )
                        "
                        :message="
                          formInputFields.delivery.firstName.touched &&
                          !formInputFields.delivery.firstName.valid
                            ? 'Bitte geben Sie einen Vornamen an.'
                            : ''
                        "
                      />
                    </div>
                    <div class="shopping__cart-order-form-input-group">
                      <Input
                        class="shopping__cart-order-form-input-spacing"
                        :required="formInputFields.delivery.org.mandatory"
                        label="Organisation"
                        placeholder="Organisation"
                        messageType="error"
                        :onInput="
                          (e) =>
                            setFormFieldValue('delivery', 'org', e.target.value)
                        "
                        :message="
                          formInputFields.delivery.org.touched &&
                          !formInputFields.delivery.org.valid
                            ? 'Die Eingabe ist ungültig. Bitte überprüfen Sie Ihre Eingabe.'
                            : ''
                        "
                      />
                      <Input
                        class="shopping__cart-order-form-input-spacing"
                        :required="formInputFields.delivery.street.mandatory"
                        label="Strasse / Nr."
                        placeholder="Strasse  & Hausnummer"
                        messageType="error"
                        :onInput="
                          (e) =>
                            setFormFieldValue(
                              'delivery',
                              'street',
                              e.target.value
                            )
                        "
                        :message="
                          formInputFields.delivery.street.touched &&
                          !formInputFields.delivery.street.valid
                            ? 'Bitte geben Sie eine Strasse und Hausnummer an.'
                            : ''
                        "
                      />
                    </div>
                    <div class="shopping__cart-order-form-input-group">
                      <Input
                        class="shopping__cart-order-form-input-spacing"
                        :required="
                          formInputFields.delivery.postOffice.mandatory
                        "
                        label="Postfach"
                        placeholder="Postfach"
                        messageType="error"
                        :onInput="
                          (e) =>
                            setFormFieldValue(
                              'delivery',
                              'postOffice',
                              e.target.value
                            )
                        "
                        :message="
                          formInputFields.delivery.postOffice.touched &&
                          !formInputFields.delivery.postOffice.valid
                            ? 'Die Eingabe ist ungültig. Bitte überprüfen Sie Ihre Eingabe.'
                            : ''
                        "
                      />
                      <Input
                        class="shopping__cart-order-form-input-spacing"
                        :required="formInputFields.delivery.zip.mandatory"
                        label="Postleitzahl"
                        placeholder="Postleitzahl"
                        messageType="error"
                        :onInput="
                          (e) =>
                            setFormFieldValue('delivery', 'zip', e.target.value)
                        "
                        :message="
                          formInputFields.delivery.zip.touched &&
                          !formInputFields.delivery.zip.valid
                            ? 'Bitte geben Sie eine Postleitzahl an.'
                            : ''
                        "
                      />
                    </div>
                    <div class="shopping__cart-order-form-input-group">
                      <Input
                        class="shopping__cart-order-form-input-spacing"
                        :required="formInputFields.delivery.city.mandatory"
                        label="Ort"
                        placeholder="Ort"
                        messageType="error"
                        :onInput="
                          (e) =>
                            setFormFieldValue(
                              'delivery',
                              'city',
                              e.target.value
                            )
                        "
                        :message="
                          formInputFields.delivery.city.touched &&
                          !formInputFields.delivery.city.valid
                            ? 'Bitte geben Sie eine Ortschaft an.'
                            : ''
                        "
                      />
                      <!-- Works also with input -->
                      <Select
                        class="shopping__cart-order-form-input-spacing"
                        :required="formInputFields.delivery.country.mandatory"
                        variant="outline"
                        size="base"
                        label="Land"
                        messageType="error"
                        :message="
                          formInputFields.delivery.country.touched &&
                          !formInputFields.delivery.country.valid
                            ? 'Bitte geben Sie ein Land an.'
                            : ''
                        "
                        :onSelect="
                          (e) =>
                            setFormFieldValue(
                              'delivery',
                              'country',
                              e.target.value
                            )
                        "
                      >
                        <option selected disabled>Land auswählen</option>
                        <option value="CH">Schweiz</option>
                        <option value="DE">Deutschland</option>
                        <option value="AT">Österreich</option>
                        <option value="FR">Frankreich</option>
                        <option value="IT">Italien</option>
                      </Select>
                    </div>
                  </div>
                </div>

                <div class="shopping__cart__action-container">
                  <btn
                    class="shopping__cart-button"
                    variant="outline-negative"
                    size="base"
                    label="Nächster Schritt"
                    ariaLabel="Nächster Schritt"
                    @emitClick="checkFormAndSetNextActiveStep"
                    :fullWidth="isMobile"
                  />
                </div>
              </Form>
            </div>
          </div>
        </li>

        <li class="accordion__item">
          <button
            class="accordion__button"
            :class="{ active: activeAccordionIndex === 3 }"
            @click="handleAccordionClick(3)"
            :id="getUniqueId('shopping-cart-drawer-checkout-button')"
          >
            <StepIndicator :step="3" :isActive="activeStepIndex === 3" />
            <h2 class="accordion__title">{{ cartCheckoutTitle }}</h2>
            <SvgIcon icon="ChevronDown" size="xl" class="accordion__arrow" />
          </button>
          <div
            class="accordion__drawer"
            :id="getUniqueId('shopping-cart-drawer-checkout')"
            :class="{ active: activeAccordionIndex === 3 }"
          >
            <div class="shopping__cart-accordion-content">
              <div class="shopping__cart-order-overview-container">
                <ul class="shopping__cart-card-list">
                  <li>
                    <ShoppingCard
                      type="view"
                      :image="{
                        src: 'images/publication-cover.png',
                        alt: 'publication-cover',
                      }"
                      title="Pensionskassenstatistik - Kennzahlen 2018-2022 (554-2200)"
                      itemPrice="Preis pro Stück: CHF 12.00"
                      price="CHF 12.00"
                      removeLabel="Entfernen"
                      editLabel="Editieren"
                      :editTriggered="editTriggered"
                    />
                  </li>
                  <li>
                    <ShoppingCard
                      type="view"
                      title="Pensionskassenstatistik - Kennzahlen 2018-2022 (554-2200)"
                      itemPrice="Preis pro Stück: CHF 12.00"
                      price="CHF 12.00"
                      removeLabel="Entfernen"
                      editLabel="Editieren"
                      :editTriggered="editTriggered"
                    />
                  </li>
                  <li>
                    <ShoppingCard
                      type="view"
                      :image="{
                        src: 'images/publication-cover.png',
                        alt: 'publication-cover',
                      }"
                      title="Pensionskassenstatistik - Kennzahlen 2018-2022 (554-2200)"
                      itemPrice="Preis pro Stück: CHF 12.00"
                      price="CHF 12.00"
                      removeLabel="Entfernen"
                      editLabel="Editieren"
                      :editTriggered="editTriggered"
                    />
                  </li>
                </ul>
                <div class="shopping__cart-delivery-summary">
                  <div class="box">
                    <h3 class="h3 shopping__cart-summary-box-title">
                      Rechnungsadresse
                    </h3>
                    <Contact
                      address1="Max Mustermann"
                      street="Enikonstrasse 3"
                      zip="6331"
                      city="Hünenberg"
                      country="Schweiz"
                    />
                  </div>
                  <div class="box shopping__cart-delivery-address-container">
                    <h3 class="h3 shopping__cart-summary-box-title">
                      Lieferadresse
                    </h3>
                    <p>Entspricht der Rechnungsaddresse</p>
                  </div>
                  <ShoppingCartTotalSummary
                    title="Gesamtsumme"
                    subTotalTitle="Zwischensumme"
                    subTotal="CHF 36.00"
                    totalTitle="Gesamtsumme (exkl. MwSt.)"
                    total="CHF 36.00"
                    orderButtonText="Jetzt bestellen"
                    orderButtonAriaLabel="Jetzt bestellen"
                    agreementText=" Mit Ihrer Bestellung erklären Sie sich mit unseren <a class='link' href='https://www.google.ch'>Datenschutzbestimmungen und AGB </a> einverstanden"
                    @nextStep="triggerConfirmation()"
                  />
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div
      v-else
      class="container__center--sm shopping__cart-confirmation-container"
    >
      <div class="shopping__cart-confirmation">
        <SvgIcon
          class="shopping__cart-confirmation-badge"
          icon="ConfirmationBadge"
          size="2xl"
        ></SvgIcon>
        <SvgIcon
          class="shopping__cart-confirmation-checkmark"
          icon="CheckmarkBold"
          size="xl"
        ></SvgIcon>
      </div>
      <h1 class="h1 shopping__cart-confirmation-title">
        Ihre Bestellung ist bei uns eingetroffen
      </h1>
      <div class="font--bold shopping__cart-confirmation-text">
        <p>Die Bestellung wurde erfolgreich aufgegeben.</p>
        <p>
          Wir werden dir eine E-Mail mit der Bestellbestätigung zukommen lassen.
        </p>
      </div>
      <btn
        class="shopping__cart-confirmation-action"
        variant="outline-negative"
        size="base"
        label="Zurück"
        ariaLabel="Zurück"
        :fullWidth="isMobile"
      />
    </div>
  </div>
</template>

<script>
import btn from '../components/Btn.vue'
import ShoppingCard from '../components/ShoppingCard.vue'
import SvgIcon from '../components/SvgIcon.vue'
import Checkbox from './Checkbox.vue'
import Contact from './Contact.vue'
import Fieldset from './Fieldset.vue'
import Form from './Form.vue'
import Input from './Input.vue'
import Notification from './Notification.vue'
import Radio from './Radio.vue'
import Select from './Select'
import ShoppingCartTotal from './ShoppingCartTotal.vue'
import ShoppingCartTotalSummary from './ShoppingCartTotalSummary.vue'
import StepIndicator from './StepIndicator.vue'
import Textarea from './Textarea'
const { v4: uuidv4 } = require('uuid')

export default {
  name: 'ShoppingCart',
  components: {
    SvgIcon,
    btn,
    ShoppingCard,
    StepIndicator,
    Notification,
    Form,
    Fieldset,
    Radio,
    Input,
    Textarea,
    Checkbox,
    Contact,
    ShoppingCartTotal,
    ShoppingCartTotalSummary,
    Select,
  },
  props: {
    cartTitle: {
      type: String,
      default: 'Shopping cart',
    },
    cartOverviewTitle: {
      type: String,
      default: 'Shopping cart',
    },
    cartAddressTitle: {
      type: String,
      default: 'Billing address & delivery address',
    },
    cartCheckoutTitle: {
      type: String,
      default: 'Submit order',
    },
  },
  data() {
    return {
      activeAccordionIndex: 1,
      activeStepIndex: 1,
      step1Confirmed: false,
      step2Confirmed: false,
      card1Shown: true,
      card2Shown: true,
      card3Shown: true,
      contentHeight: 0,
      switchTimeOut: null,
      shoppingCartId: uuidv4(),
      showDeliveryAddress: false,
      showConfirmation: false,
      screenSize: 0,
      formInputFields: {
        invoice: {
          gender: {
            value: null,
            touched: false,
            valid: false,
            mandatory: true,
          },
          firstName: {
            value: '',
            touched: false,
            valid: false,
            mandatory: true,
          },
          lastName: {
            value: '',
            touched: false,
            valid: false,
            mandatory: true,
          },
          org: {
            value: '',
            touched: false,
            valid: true,
            mandatory: false,
          },
          street: {
            value: '',
            touched: false,
            valid: false,
            mandatory: true,
          },
          zip: {
            value: '',
            touched: false,
            valid: false,
            mandatory: true,
          },
          postOffice: {
            value: '',
            touched: false,
            valid: true,
            mandatory: false,
          },
          city: {
            value: '',
            touched: false,
            valid: false,
            mandatory: true,
          },
          country: {
            value: '',
            touched: false,
            valid: false,
            mandatory: true,
          },
          email: {
            value: '',
            touched: false,
            valid: false,
            mandatory: true,
          },
          phone: {
            value: '',
            touched: false,
            valid: true,
            mandatory: false,
          },
        },
        delivery: {
          firstName: {
            value: '',
            touched: false,
            valid: false,
            mandatory: true,
          },
          lastName: {
            value: '',
            touched: false,
            valid: false,
            mandatory: true,
          },
          org: {
            value: '',
            touched: false,
            valid: true,
            mandatory: false,
          },
          street: {
            value: '',
            touched: false,
            valid: false,
            mandatory: true,
          },
          zip: {
            value: '',
            touched: false,
            valid: false,
            mandatory: true,
          },
          postOffice: {
            value: '',
            touched: false,
            valid: true,
            mandatory: false,
          },
          city: {
            value: '',
            touched: false,
            valid: false,
            mandatory: true,
          },
          country: {
            value: '',
            touched: false,
            valid: false,
            mandatory: true,
          },
        },
      },
    }
  },
  mounted() {
    this.resizeWindow()
    window.addEventListener('resize', this.resizeWindow)
  },
  watch: {
    activeAccordionIndex() {
      this.scrollContentIntoView(this.activeAccordionIndex)
    },
  },
  methods: {
    handleAccordionClick(index) {
      if (!this.card1Shown && !this.card2Shown && !this.card3Shown) {
        return
      }
      if (this.activeAccordionIndex === index) {
        this.activeAccordionIndex = null
      } else if (
        index === 1 ||
        index === 2 ||
        (index === 3 && this.canContinue)
      ) {
        this.activeAccordionIndex = index
        this.activeStepIndex = index
        if (index === 2) {
          this.step1Confirmed = true
        }
        if (index === 3) {
          this.step2Confirmed = true
        }
      } else if (index === 3 && !this.canContinue) {
        this.step2Confirmed = false
      }
    },
    overviewNextStepClicked() {
      this.activeAccordionIndex = 2
      this.activeStepIndex = 2
      this.step1Confirmed = true
    },
    async triggerConfirmation() {
      this.showConfirmation = true
      await this.$nextTick()
      const scroolTarget = document.getElementById('main-header')

      if (scroolTarget) {
        if (this.switchTimeOut) {
          clearTimeout(this.switchTimeOut)
        }
        this.switchTimeOut = setTimeout(() => {
          scroolTarget.scrollIntoView({ behavior: 'smooth' })
        }, 200)
      }
    },
    onChange(e) {
      this.setFormFieldValue('invoice', 'gender', e.target.value)
    },
    editTriggered() {
      this.activeAccordionIndex = 1
      this.activeStepIndex = 1
    },
    setContentHeight() {
      if (this.activeIndex === 1) {
        this.contentHeight =
          document.getElementById(
            this.getUniqueId('shopping-cart-drawer-overview')
          ).scrollHeight + 'px'
      } else if (this.activeIndex === 2) {
        this.contentHeight =
          document.getElementById(
            this.getUniqueId('shopping-cart-drawer-address')
          ).scrollHeight + 'px'
      } else if (this.activeIndex === 3) {
        this.contentHeight =
          document.getElementById(
            this.getUniqueId('shopping-cart-drawer-checkout')
          ).scrollHeight + 'px'
      }
    },
    getUniqueId(text = '') {
      return `${text}-${this.shoppingCartId}`
    },
    resizeWindow() {
      this.screenSize = document.body.clientWidth
    },
    scrollContentIntoView(index) {
      const accordionIdMap = {
        1: 'shopping-cart-drawer-overview-button',
        2: 'shopping-cart-drawer-address-button',
        3: 'shopping-cart-drawer-checkout-button',
      }

      const scroolTarget = document.getElementById(
        this.getUniqueId(accordionIdMap[index])
      )

      if (scroolTarget) {
        if (this.switchTimeOut) {
          clearTimeout(this.switchTimeOut)
        }
        this.switchTimeOut = setTimeout(() => {
          scroolTarget.scrollIntoView({ behavior: 'smooth' })
        }, 200)
      }
    },
    setFormFieldValue(type, field, value) {
      this.formInputFields[type][field]['value'] = value
      this.formInputFields[type][field]['touched'] = true

      if (this.formInputFields[type][field]['mandatory'] === false) {
        this.formInputFields[type][field]['valid'] = true
      } else {
        if (
          this.formInputFields[type][field]['value'] &&
          this.formInputFields[type][field]['value'].trim() !== ''
        ) {
          this.formInputFields[type][field]['valid'] = true
        } else {
          this.formInputFields[type][field]['valid'] = false
        }
      }
    },
    validateFields() {
      const keys = Object.keys(this.formInputFields)
      const keysToValidate = ['invoice']
      if (this.showDeliveryAddress) {
        keysToValidate.push('delivery')
      }
      keys.forEach((key) => {
        const fields = Object.keys(this.formInputFields[key])
        if (keysToValidate.includes(key)) {
          fields.forEach((field) => {
            if (this.formInputFields[key][field]['mandatory'] === false) {
              this.formInputFields[key][field]['valid'] = true
            } else {
              if (
                this.formInputFields[key][field]['value'] &&
                this.formInputFields[key][field]['value'].trim() !== ''
              ) {
                this.formInputFields[key][field]['valid'] = true
              } else {
                this.formInputFields[key][field]['valid'] = false
              }
            }
            this.formInputFields[key][field]['touched'] = true
          })
        }
      })
    },
    checkFormAndSetNextActiveStep() {
      this.validateFields()
      const keysToValidate = ['invoice']
      if (this.showDeliveryAddress) {
        keysToValidate.push('delivery')
      }

      const allFieldsValid = keysToValidate.every((key) => {
        const fields = Object.keys(this.formInputFields[key])
        return fields.every((field) => {
          return this.formInputFields[key][field]['valid']
        })
      })
      if (allFieldsValid) {
        this.activeAccordionIndex = 3
        this.activeStepIndex = 3
        this.step2Confirmed = true
      }
    },
  },
  computed: {
    isMobile() {
      return this.screenSize < 1024
    },
    canContinue() {
      const keysToValidate = ['invoice']
      if (this.showDeliveryAddress) {
        keysToValidate.push('delivery')
      }

      return keysToValidate.every((key) => {
        const fields = Object.keys(this.formInputFields[key])
        return fields.every((field) => {
          return this.formInputFields[key][field]['valid']
        })
      })
    },
  },
}
</script>
